<template>
  <a-layout id="app-layout-sider">
    <a-layout-sider v-model="collapsed" theme="light" class="layout-sider" width="300">
      <div class="logo">
        <img class="pic-logo" src="~@/assets/logo.png">
      </div>
      <a-menu class="menu-item" theme="light" mode="inline" :selectedKeys="[current]" :openKeys="['menu_1']" @click="menuHandle">
        <a-sub-menu v-for="(menuInfo, index) in menu" :key="index" :title="menuInfo.title">
          <a-menu-item v-for="(subMenuInfo, subIndex) in menuInfo.children" :key="subMenuInfo.key">
            <icon-font :type="subMenuInfo.icon" />
            {{ subMenuInfo.title }}
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content class="layout-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>

export default {
  name: 'MyAppSider',
  data() {
    return {
      collapsed: true,
      current: 'menu_ymdj',
      menu: {
        'menu_1': {
          icon: 'icon-fengche',
          title: '原木管理',
          pageName: 'FrameworkSocketIpc',
          params: {
            // test: 'hello'
          },
          children: [
            {
              key: 'menu_ymdj',
              icon: 'icon-fengche',
              title: '原木登记',
              pageName: 'WoodStockList',
              params: {
                // test: 'hello'
              },
            },
            // {
            //   key: 'menu_ckgl',
            //   icon: 'icon-niudan',
            //   title: '出库管理',
            //   pageName: 'FrameworkSocketIpc',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_1',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkSocketHttpServer',
            //   pageName: 'FrameworkSocketHttpServer',
            //   params: {
            //   }
            // }
            // ,
            // {
            //   key: 'menu_2',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkSocketSocketServer',
            //   pageName: 'FrameworkSocketSocketServer',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_3',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkJsonDBIndex',
            //   pageName: 'FrameworkJsonDBIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_4',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkSqliteDBIndex',
            //   pageName: 'FrameworkSqliteDBIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_5',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkJobsIndex',
            //   pageName: 'FrameworkJobsIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_6',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkUpdaterIndex',
            //   pageName: 'FrameworkUpdaterIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_7',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkSoftwareIndex',
            //   pageName: 'FrameworkSoftwareIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_8',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkJavaIndex',
            //   pageName: 'FrameworkJavaIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_9',
            //   icon: 'icon-liuxing',
            //   title: 'FrameworkTestApiIndex',
            //   pageName: 'FrameworkTestApiIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_10',
            //   icon: 'icon-liuxing',
            //   title: 'OsFileIndex',
            //   pageName: 'OsFileIndex',
            //   params: {
            //   }
            // },
            // {
            //   key: 'menu_11',
            //   icon: 'icon-liuxing',
            //   title: 'OsFilePic',
            //   pageName: 'OsFilePic',
            //   params: {
            //   }
            // }
          ]
        },
        // 'menu_2': {
        //   icon: 'icon-fengche',
        //   title: '原木管理',
        //   pageName: 'FrameworkSocketIpc',
        //   params: {
        //   },
        // },
      }
    };
  },
  created() {
  },
  mounted() {
    // this.menuHandle()
  },
  methods: {
    findMenuItemByKey(menu, keyToFind) {
      // 遍历 menu 对象中的每个 key
      for (const key in menu) {
        if (menu.hasOwnProperty(key)) {
          const item = menu[key];

          // 如果 item 中有 children 属性，则递归查找
          if (item.children && item.children.length > 0) {
            for (const child of item.children) {
              if (child.key === keyToFind) {
                return child; // 找到目标对象，返回
              } else {
                const found = this.findMenuItemByKey({ child }, keyToFind); // 递归查找子菜单
                if (found) return found; // 如果在子菜单中找到目标对象，返回
              }
            }
          }
        }
      }

      return null; // 如果未找到，返回 null
    },
    menuHandle(e) {
      console.log('sider menu e:', e);
      this.current = e ? e.key : this.current;
      console.log('sider menu current:', this.current);

      const linkInfo = this.findMenuItemByKey(this.menu, this.current)
      console.log('[home] load linkInfo:', linkInfo);
      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params })
    },
    changeMenu(e) {
      console.log('sider menu e:', e);
      //this.current = e.key;
    }
  },
};
</script>
<style lang="less" scoped>
// 嵌套
#app-layout-sider {
  height: 100%;

  .logo {
    border-bottom: 1px solid #e8e8e8;
  }

  .pic-logo {
    height: 32px;
    //background: rgba(139, 137, 137, 0.2);
    margin: 10px;
  }

  .layout-sider {
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
  }

  .menu-item {
    .ant-menu-item {
      background-color: #fff;
      margin-top: 0px;
      margin-bottom: 0px;
      padding: 0 0px !important;
    }
  }

  .layout-content {
    //background-color: #fff;
  }
}
</style>
